<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浏览器扩展测试页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f8f9fa;
            min-height: 100vh;
            padding: 20px;
            color: #333;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        header {
            text-align: center;
            margin-bottom: 40px;
            color: #333;
        }

        h1 {
            font-size: 2.2rem;
            margin-bottom: 10px;
            font-weight: 600;
            color: #2c3e50;
        }

        .actions {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 30px;
        }

        .btn {
            display: inline-block;
            padding: 10px 20px;
            background: #007bff;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            font-weight: 500;
            transition: background-color 0.2s ease;
            border: none;
            cursor: pointer;
            font-size: 14px;
        }

        .btn:hover {
            background: #0056b3;
        }

        .btn:disabled {
            background: #6c757d;
            cursor: not-allowed;
        }

        .card {
            background: white;
            border: 1px solid #e9ecef;
            border-radius: 6px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .card h2 {
            color: #2c3e50;
            margin-bottom: 15px;
            font-size: 1.3rem;
            font-weight: 600;
        }

        .card h3 {
            color: #2c3e50;
            margin-bottom: 10px;
            font-size: 1.1rem;
            font-weight: 600;
        }

        .test-section {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid #e9ecef;
            border-radius: 6px;
            background: white;
        }

        .result {
            margin-top: 10px;
            padding: 12px;
            background: #f8f9fa;
            border-radius: 4px;
            white-space: pre-wrap;
            font-size: 14px;
            border: 1px solid #e9ecef;
        }

        .success {
            color: #155724;
            background: #d4edda;
            border-color: #c3e6cb;
        }

        .error {
            color: #721c24;
            background: #f8d7da;
            border-color: #f5c6cb;
        }

        .info {
            color: #0c5460;
            background: #d1ecf1;
            border: 1px solid #bee5eb;
            padding: 15px;
            border-radius: 6px;
            margin: 20px 0;
        }

        .extension-info {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 6px;
            padding: 20px;
            margin: 20px 0;
        }

        .extension-info h3 {
            margin-top: 0;
            color: #856404;
            font-size: 1.2rem;
            font-weight: 600;
        }

        .extension-steps {
            margin: 10px 0;
            padding-left: 20px;
        }

        .extension-steps li {
            margin: 8px 0;
            line-height: 1.5;
        }

        .download-link {
            display: inline-block;
            background: #28a745;
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 4px;
            font-weight: 500;
            margin: 10px 0;
            transition: background-color 0.2s ease;
        }

        .download-link:hover {
            background: #218838;
        }

        .extension-steps code {
            background: #e9ecef;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: monospace;
            font-size: 13px;
        }

        @media (max-width: 768px) {
            .actions {
                flex-direction: column;
                align-items: center;
                gap: 10px;
            }
            
            h1 {
                font-size: 1.8rem;
            }
            
            .card, .test-section {
                padding: 15px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>🧪 浏览器扩展测试</h1>
        </header>

        <!-- 操作按钮 -->
        <div class="actions">
            <a href="/" class="btn">🏠 返回首页</a>
            <a href="/import" class="btn">导入浏览器数据</a>
            <a href="/stat" class="btn">📊 统计数据</a>
            <a href="/ai-grouping" class="btn">🤖 AI智能分组</a>
        </div>
        
        <!-- 浏览器扩展信息 -->
        <div class="extension-info">
            <h3>个人导航助手浏览器扩展</h3>
            <p>个人导航助手是一个功能强大的浏览器扩展，可以帮助您：</p>
            <ul class="extension-steps">
                <li>自动收集浏览历史数据</li>
                <li>同步书签到个人导航服务</li>
                <li>将个人导航服务数据上传为浏览器书签</li>
                <li>导出浏览历史和书签为JSON文件</li>
            </ul>
            
            <h4>安装说明</h4>
            <ol class="extension-steps">
                <li><a href="/static/navigation-extension.zip" class="download-link" download>点击下载浏览器扩展</a></li>
                <li>解压缩下载的文件到一个文件夹</li>
                <li>打开Chrome浏览器，访问 <code>chrome://extensions/</code></li>
                <li>开启右上角的"开发者模式"</li>
                <li>点击"加载已解压的扩展程序"</li>
                <li>选择解压后的文件夹完成安装</li>
            </ol>
            
            <p><strong>注意：</strong>扩展安装后可能需要刷新页面才能正常使用。</p>
        </div>
        
        <!-- 使用说明 -->
        <div class="info">
            <h3>使用说明</h3>
            <p>本页面提供浏览器扩展的功能测试。请确保您已安装并启用了个人导航助手扩展。</p>
            <p>测试功能包括：</p>
            <ul>
                <li>检查扩展是否正确安装</li>
                <li>测试浏览数据收集功能</li>
                <li>查看浏览统计数据</li>
            </ul>
        </div>
        
        <div class="test-section">
            <h2>1. 测试扩展是否安装</h2>
            <button class="btn" onclick="checkExtension()">检查扩展安装状态</button>
            <div id="extension-result" class="result"></div>
        </div>
        
        <div class="test-section">
            <h2>2. 测试浏览数据收集</h2>
            <button class="btn" onclick="sendTestData()">发送测试浏览数据</button>
            <div id="send-result" class="result"></div>
        </div>
        
        <div class="test-section">
            <h2>3. 查看浏览统计数据</h2>
            <button class="btn" onclick="getStats()">获取浏览统计</button>
            <div id="stats-result" class="result"></div>
        </div>
    </div>

    <script>
        // 检查扩展是否安装
        function checkExtension() {
            const resultDiv = document.getElementById('extension-result');
            resultDiv.innerHTML = '正在检查扩展状态...';
            
            // 检查是否存在扩展注入的全局变量或函数
            if (typeof chrome !== 'undefined' && chrome.runtime) {
                // 尝试与扩展通信
                chrome.runtime.sendMessage({action: "checkStatus"}, function(response) {
                    if (chrome.runtime.lastError) {
                        resultDiv.innerHTML = '<span class="error">扩展未安装或未启用: ' + chrome.runtime.lastError.message + '</span>';
                    } else {
                        resultDiv.innerHTML = '<span class="success">扩展已安装并运行正常</span>';
                    }
                });
            } else {
                resultDiv.innerHTML = '<span class="error">扩展未安装或未启用。请先安装个人导航助手扩展。</span>';
            }
        }
        
        // 发送测试浏览数据
        function sendTestData() {
            const resultDiv = document.getElementById('send-result');
            const btn = event.target;
            btn.disabled = true;
            btn.textContent = '发送中...';
            resultDiv.innerHTML = '正在发送测试数据...';
            
            const testData = {
                visits: [
                    {
                        url: window.location.href,
                        title: "浏览器扩展测试页面",
                        visitTime: new Date().toISOString(),
                        domain: window.location.hostname,
                        path: window.location.pathname
                    }
                ]
            };
            
            fetch('/api/browsing-history', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(testData)
            })
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    resultDiv.innerHTML = '<span class="success">测试数据发送成功: ' + data.message + '</span>';
                } else {
                    resultDiv.innerHTML = '<span class="error">发送失败: ' + data.message + '</span>';
                }
            })
            .catch(error => {
                resultDiv.innerHTML = '<span class="error">发送失败: ' + error.message + '</span>';
            })
            .finally(() => {
                btn.disabled = false;
                btn.textContent = '发送测试浏览数据';
            });
        }
        
        // 获取浏览统计数据
        function getStats() {
            const resultDiv = document.getElementById('stats-result');
            const btn = event.target;
            btn.disabled = true;
            btn.textContent = '获取中...';
            resultDiv.innerHTML = '正在获取统计数据...';
            
            fetch('/api/browsing-stats')
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    resultDiv.innerHTML = '<span class="success">浏览统计数据:\n' + JSON.stringify(data.data, null, 2) + '</span>';
                } else {
                    resultDiv.innerHTML = '<span class="error">获取失败: ' + data.message + '</span>';
                }
            })
            .catch(error => {
                resultDiv.innerHTML = '<span class="error">获取失败: ' + error.message + '</span>';
            })
            .finally(() => {
                btn.disabled = false;
                btn.textContent = '获取浏览统计';
            });
        }
        
        // 页面加载完成后自动检查扩展状态
        window.addEventListener('load', function() {
            setTimeout(checkExtension, 1000);
        });
    </script>
</body>
</html>